<template>
	<div class="yl-main main">
		<div class="" >
			<Tabs v-model="ceshi" style="background:#FFF;">
				<TabPane :activeValue="ceshi" name="1" label="时时猜" style="overflow:hidden" @load="getGuessList(1)">
					<div class="hour-main">
						<div class="hour-bg p-r">
							<div class="periods ft-24 co-white">第{{number1}}期</div>
							<div class="dis-flex hour-content align-center" style="overflow:hidden">
								<div class="hour-content-img">
									<img src="@/assets/yl_img1.png" class="hour-img"/>
								</div>
								<div class="flex-1 hour-name">
									<div class="ft-32">时时猜</div>
									<div class="ft-24 ">十分钟开奖一场</div>
								</div>
								<div class="hour-time">
									<div class="ft-24">竞猜剩余时间</div>
									<div class="ft-72"><!-- <span>00</span><span>:</span><span>49</span> -->{{endTime1}}</div>
								</div>
							</div>
						</div>
						<div class="play-main">
							<div class="play-title"><span class="ver-mid dis-inline">玩法列表</span><div class="t-c how-play dis-inline ver-mid"><span class="small-font">怎么玩？</span></div></div>
							<div class="play-list">
								<div class="play-item dis-flex align-center">
									<div class="play-left">和值</div>
									<div class="play-content">
										<p class="play-name">玩法一：和值大小单双</p>
										<p class="play-desc">和值大小单双简单说明</p>
									</div>
									<div class="play-join">
										<a class="btn btn-red btn-circle" @click="openGusess1('guessOpenHz')">立即竞猜</a>
									</div>
								</div>
								<div class="play-item dis-flex align-center">
									<div class="play-left">龙虎和</div>
									<div class="play-content">
										<p class="play-name">玩法二：龙虎和</p>
										<p class="play-desc">和值大小单双简单说明</p>
									</div>
									<div class="play-join">
										<a class="btn btn-red btn-circle" @click="openGusess1('guessOpenLhd')">立即竞猜</a>
									</div>
								</div>
								<div class="play-item dis-flex align-center">
									<div class="play-left">斗牛</div>
									<div class="play-content">
										<p class="play-name">玩法三：斗牛</p>
										<p class="play-desc">和值大小单双简单说明</p>
									</div>
									<div class="play-join">
										<a class="btn btn-red btn-circle" @click="openGusess1('guessOpenDn')">立即竞猜</a>
									</div>
								</div>
								<div class="play-item dis-flex align-center">
									<div class="play-left">趣味</div>
									<div class="play-content">
										<p class="play-name">玩法四：趣味</p>
										<p class="play-desc">和值大小单双简单说明</p>
									</div>
									<div class="play-join">
										<a class="btn btn-red btn-circle" @click="openGusess1('guessOpenQw')">立即竞猜</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane :activeValue="ceshi"  name="2" label="分分猜" @load="getGuessList(2)"></TabPane>
			</Tabs>
			<Commoncontainer title="中奖榜单">
				<div class="win-list">
					<Listitem class="align-center">
						<template slot="left">
							<div class="dis-flex align-center">
								<img class="win-icon" src="@/assets/win_icon.png" />
								<img class="win-head" src="@/assets/head_img.png" />
							</div>
						</template>
						<template slot="center">
							<div class="ml-10">
								<div class="ft-32">罗恩</div>
								<div class="ft-24 win-time">恭喜获得230个金币</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-24" style="color: #958DA5;">
								2018-05-28 11:42
							</div>
						</template>
					</Listitem>
					<Listitem class="align-center">
						<template slot="left">
							<div class="dis-flex align-center">
								<img class="win-icon" src="@/assets/win_icon.png" />
								<img class="win-head" src="@/assets/head_img.png" />
							</div>
						</template>
						<template slot="center">
							<div class="ml-10">
								<div class="ft-32">罗恩</div>
								<div class="ft-24 win-time">恭喜获得230个金币</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-24" style="color: #958DA5;">
								2018-05-28 11:42
							</div>
						</template>
					</Listitem>
				</div>
			</Commoncontainer>
		</div>

		
		<!-- 和值 -->
		<Choose v-model="guessOpenHz">
			<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId(0)"  :list="getnowlist(0)" title="和值" :desc="playDesc(0)" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenHz')" contentClass="hz-content">
			</ChooseContent>
		</Choose>
		<!-- 和值 end -->
		<!--龙虎斗-->
		<Choose v-model="guessOpenLhd">
			<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId(1)" :list="getnowlist(1)" title="龙虎斗" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenLhd')">
			</ChooseContent>
		</Choose>
		<!-- 龙虎斗end -->

		<!-- 斗牛 -->
		<Choose v-model="guessOpenDn">
			<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId(2)" :list="getnowlist(2)" title="斗牛" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenDn')" contentClass="t-l dn-content">
			</ChooseContent>
		</Choose>
		
		<!-- 斗牛 end -->
		<!-- 趣味 -->
		<Choosespecial v-model="guessOpenQw">
			<Tabs v-model="tabvalue1" type="top-fixed1">
				<TabPane  name="0" label="一帆风顺" >
					<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId1(0)" :list="getnowlistspecial(0)" title="" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenQw')" contentClass="t-l qw-content">
					</ChooseContent>
				</TabPane>
				<TabPane  name="1" label="好事成双" >
					<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId1(1)" :list="getnowlistspecial(1)" title="" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenQw')" contentClass="t-l qw-content">
					</ChooseContent>
				</TabPane>
				<TabPane  name="2" label="三星报喜" >
					<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId1(2)" :list="getnowlistspecial(2)" title="" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenQw')" contentClass="t-l qw-content">
					</ChooseContent>
				</TabPane>
				<TabPane  name="3" label="四季发财" >
					<ChooseContent :remaining="remaining" :lotteryId="nowLotteryId" :playId="getnowplayId1(3)" :list="getnowlistspecial(3)" title="" desc="描述描述" :time="nowTime" :number="nowNumber" :chooseNumber="lhdArr.length" @save="join($event,'guessOpenQw')" contentClass="t-l qw-content">
					</ChooseContent>
				</TabPane>
			</Tabs>
		</Choosespecial>
		<!-- <Choose v-model="guessOpenQw" title="趣味" desc="趣味描述描述" number="20180528091" :chooseNumber="qwArr.length" @save="join('guessOpenQw')">
			<div class="mb-40">
				
				<div :class=" 'lh-choose-item '+(qwArr.indexOf('qw0')>=0?'checked':'') " @click="setType('qw0','qwArr')">0</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw1')>=0?'checked':'') " @click="setType('qw1','qwArr')">1</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw2')>=0?'checked':'') " @click="setType('qw2','qwArr')">2</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw3')>=0?'checked':'') " @click="setType('qw3','qwArr')">3</div>
			</div>
			<div class="mb-40">
				<div :class=" 'lh-choose-item '+(qwArr.indexOf('qw4')>=0?'checked':'') " @click="setType('qw4','qwArr')">4</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw5')>=0?'checked':'') " @click="setType('qw5','qwArr')">5</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw6')>=0?'checked':'') " @click="setType('qw6','qwArr')">6</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw7')>=0?'checked':'') " @click="setType('qw7','qwArr')">7</div>
			</div>
			<div>
				<div :class=" 'lh-choose-item '+(qwArr.indexOf('qw8')>=0?'checked':'') " @click="setType('qw8','qwArr')">8</div>
				<div :class=" 'lh-choose-item ml-40 '+(qwArr.indexOf('qw9')>=0?'checked':'') " @click="setType('qw9','qwArr')">9</div>
				<div class="lh-choose-item ml-40" style="visibility:hidden">隐藏</div>
				<div class='lh-choose-item ml-40' style="visibility:hidden">隐藏</div>
			</div>	
		</Choose> -->
		<!-- 趣味 end -->

		<Modal v-model="resultShow" @okCall="openChasing" cancelBtn="确定" okBtn="智能追号">
			<div class="result-icon"><img src="@/assets/Group3@2x.png" /></div>
			<div class="result-show t-c ft-40">投注成功</div>
		</Modal>

		<!--智能追号-->
		<!-- <div class="chasing-out" v-show="chasingShow">
			<div class="mask"></div>
			<div class="chasing-main">
				<div class="chasing-title">距20180604112期截止还有 <span>04:49</span></div>
				<div class="chasing-content">
					<div class="chasing-title1">
						<div class="flex-1">追7期</div>
						<div class="chasing-change">修改方案</div>
					</div>
					<div class="chasing-list-head dis-flex">
						<div>期号</div>
						<div>倍数</div>
						<div>投入(元)</div>
						<div>盈利(元)</div>
						<div>盈利率</div>
					</div>
					<div class="chasing-list-content">

					</div>
				</div>
			</div>
		</div> -->
		<Chasing v-model="chasingList" :chooseContent="chooseContent"  :time="nowTime" :number="nowNumber" @close="closeChasing"  :show="chasingShow"></Chasing>
	</div>
</template>
<script>
	import Modal from '@/components/modal';
	import Commoncontainer from "@/components/common-container";
	import Listitem from "@/components/list-item";
	import Tabs from '@/components/tabs';
	import TabPane from '@/components/tabPane';
	import Chasing from './chasingdia';
	import Choose from './choose';
	import Choosespecial from './chooseSpecial';

	import {getGuessList,playBet,getRemaining} from '@/api/hourlottery';
	import {stamp2time} from '@/utils/time';
	import ChooseContent from './chooseContent';

	export default{
		data(){
			return {
				tabvalue1:"0",
				chooseContent:{},//选择的内容
				ceshi:"1",
				resultShow:false,//投注结果显示
				/*龙虎斗*/
				lhdArr:[],//龙虎选择的列表
				guessOpenLhd:false,
				/*和值*/
				hzArr:[],// 和值列表
				guessOpenHz:false,//和值是否打开
				/*斗牛*/
				dnArr:[],//斗牛列表
				guessOpenDn:false,//斗牛是否打开

				qwArr:[],//趣味列表
				guessOpenQw:false,//趣味是否打开
				chasingShow:false,//智能追号是否显示
				chasingList:[],
				//时时猜数据
				number1:"",
				number2:"",
				endStamp1:0,
				endStamp2:0,
				endTime1:"0",
				endTime2:"0",
				lotteryId1:1,
				lotteryId2:2,
				list1:[],
				help1:[],//规则介绍
				list2:[],
				help2:[],//规则介绍
				remaining:0, //余额
				qwlist1:[],
				qwlist2:[],
			}
		},
		computed:{
			nowNumber(){
				return this["number"+this.ceshi];
			},
			nowTime(){
				return this["endTime"+this.ceshi];
			},
			nowLotteryId(){
				return this["lotteryId"+this.ceshi];
			}
		},
		mounted(){
			this.timeinter1=null;
			this.timeinter2=null;

			this.timer1=null;
			this.timer2=null;

			this.getRemaining();
		},
		methods:{
			getRemaining(){
				getRemaining().then(res=>{
					if (res.code==1) {
						this.remaining=res.data.total_money;
					}
				})
			},
			playDesc(index){
				let helpList=this["help"+this.ceshi];
				return helpList.length>0?helpList[index].play_instrs:"";
			},
			getnowlist(index){
				return this["list"+this.ceshi][index]?this["list"+this.ceshi][index].play_selon:[];
			},
			getnowlistspecial(index){
				return this["qwlist"+this.ceshi][index]?this["qwlist"+this.ceshi][index].play_selon:[];
			},
			getnowplayId1(index){
				return this["qwlist"+this.ceshi][index]?this["qwlist"+this.ceshi][index].play_id:0;
			},
			getnowplayId(index){
				return this["list"+this.ceshi][index]?this["list"+this.ceshi][index].play_id:0;
			},
			getGuessList(type){ //时时彩加载
				getGuessList(type).then(res=>{
					if (res.code==1) {
						let data=res.data;
						this['lotteryId'+type]=data.id;
						this['number'+type]=data.now_issue;
						this['endStamp'+type]=data.now_endtime;
						this['endTime'+type]=stamp2time(data.now_endtime);
						clearInterval(this['timeinter'+type]);

						if (this['list'+type].length==0&&data.play.list) {
							this['list'+type]=data.play.list;
							let listSpecail=data.play.list[3];
							let playList=listSpecail.play_list;
							let arr0=[];
							let arr1=[];
							let arr2=[];
							let arr3=[];
							listSpecail.play_selon.forEach(item=>{
								arr0.push({
									name:item,
									odds:playList[0].play_odds
								});
								arr1.push({
									name:item,
									odds:playList[1].play_odds
								})
								arr2.push({
									name:item,
									odds:playList[2].play_odds
								})
								arr3.push({
									name:item,
									odds:playList[3].play_odds
								})
							})
							this['qwlist'+type]=[{play_selon:arr0,play_id:playList[0].play_id},{play_selon:arr1,play_id:playList[1].play_id},{play_selon:arr2,play_id:playList[2].play_id},{play_selon:arr3,play_id:playList[3].play_id}]
							this['help'+type]=data.play.help;
						}

						if (data.now_endtime>10) {
							clearTimeout(this['time'+type]);
							this['time'+type]=setTimeout(()=>{
								this.getGuessList(type);
							},data.now_endtime*1000);
						}else{
							clearTimeout(this['time'+type]);
							this['time'+type]=setTimeout(()=>{
								this.getGuessList(type);
							},5000);
						}
						if (data.now_endtime!=0) {
							this['timeinter'+type]=setInterval(()=>{
								this['endStamp'+type]--;
								this['endTime'+type]=stamp2time(this['endStamp'+type]);
							},1000);
						}						
					}
				});
			},
			openChasing(value){
				let len=10;
				let arr=[];
				let chooseContent=this.chooseContent;
				for(let i=0;i<10;i++){
					arr.push({bl:Math.pow(2,i)});
				}
				this.chasingList=arr;
				this.chasingShow=true;
			},
			setType(type,gametype){//和值选号
				let arr=this[gametype];
				let index=arr.indexOf(type);
				if (index>=0) {
					this[gametype].splice(index,1);
				}else{
					this[gametype].push(type);
				}
			},
			openGusess1(type){
				this[type]=true;
			},
			join(value,type){
				this[type]=false;
				this.chooseContent=value;
				this.resultShow=true;
			},
			closeChasing(){
				this.chasingShow=false;
			}
		},
		components:{
			Choosespecial,
			ChooseContent,
			Chasing,
			Tabs,
			TabPane,
			Listitem,
			Commoncontainer,
			Modal,
			Choose
		}
	}
</script>
<style scoped  lang="scss">
	@import '@/css/base.scss';

	.yl-main{color: #5D5174;background-color:#F8F8F8;}
	.hour-main{margin:40px 30px;background: #FEF8F8;border-radius: 8px;}
	.hour-bg{height: 192px;background: url(../assets/hour-bg@3x.png);background-size: cover;border-radius: 12px;overflow: hidden;}
	.periods{position:absolute; left:0;top:0;padding:6px 12px;background: rgba(0,0,0,0.1);}
	.hour-content-img{margin-left: 46px;}
	.hour-img{width: 104px;height: 104px;margin-top: 18px;}

	.hour-name{margin-left: 30px;}
	.hour-content{margin-top: 36px;color: #FFF;}
	.hour-time{margin-right: 40px;}

	.play-title{margin-top: 44px;padding-left: 30px;}
	.play-list{margin: 30px;overflow: hidden;}
	.play-item{margin-bottom: 40px;}
	.play-left{width: 96px;height: 96px;line-height: 96px;border-radius: 50%;font-size:24px;background: #FFE5E7;color: #FD4658;text-align: center;}

	.play-content{margin-left: 22px;-webkit-flex:1;flex:1;}
	.play-name{font-size: 28px;}
	.play-desc{margin-top: 4px;font-size: 24px;color: #958DA5;}

	.how-play{display:inline-block;width: 96px;height: 36px;margin-left:16px;border-radius: 20px;font-size:20px;background: #FFF5DD;color: #FF9F03;}
	.small-font{display: inline-block;-webkit-transform-origin-x: 50%;
    -webkit-transform: scale(0.8);transform-origin-x: 50%;transform: scale(0.8);}


    .win-list{padding: 0 40px;}
	.win-icon{width: 40px;padding: 0 10px;}
	.win-head{width: 84px;height: 84px;margin-left: 10px;}
	.win-time{margin-top: 4px;color: #958DA5;}
	.win-number{font-size: 40px;color: #FD4658;}


	/*立即竞猜 对话框*/
    .close-btn{position: fixed;z-index: 1112;top: 10%;margin-top: 20px;right: 40px;width: 40px;height: 40px;line-height: 40px;text-align: center;}
    .close-btn img{width: 30px;height: 30px;}
    .guess-dia-content{position: fixed;left:30px ;bottom: 0;width: 690px;height: 90%;background: #FFF;z-index: 1001;box-shadow: 0 28px 40px 0 rgba(199,199,199,0.25);border-top-left-radius: 16px;border-top-right-radius: 16px;min-height: 90%;overflow: auto;-webkit-overflow-scrolling: touch;}
    .guess-dia-content1{min-height: inherit;position: relative;}
    .lh-title{position: fixed;z-index: 1112;top: 10%;margin-top: -64px;left:50%;width: 128px;height: 128px;line-height:128px;margin-left: -64px;background: #FFE5E7;border-radius: 50%;font-size:28px;color: #FD4658;}
    .lh-header{margin-top: 86px;padding-bottom:30px;border-bottom: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-top:0; }
    .lh-title1{font-size: 32px;font-weight: bold;}
    .lh-desc{margin-top: 8px;color: #958DA5;}
    .lh-time{margin-top: 18px;}
    .lh-timer{height: 66px;line-height: 66px;margin-top: 6px;font-size: 48px;color: #FD4658;}


    .lh-content{margin-top: 54px;padding-bottom: 40px;}
    .lh-choose-item{display: inline-block;width: 108px;height:108px;line-height:108px;background: #FFFFFF;border: 1px solid #FD4658;border-radius: 50%;text-align: center;color: #FD4658;}
    .lh-choose-item.checked{background: $red;color: #FFF;}
    .lh-bottom-div{height: 480px;}
    .lh-bottom{position: absolute;bottom:0;width: 100%;height: 480px;box-sizing:border-box;border-top: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-bottom:0;}
  	.p-special{padding:34px 30px 0 30px;}
  	.lh-price{margin: 38px 0 22px;}
  	.lh-price input{width: 250px;height: 60px;padding: 8px;line-height: 44px;box-sizing:border-box;outline: 0;border-radius: 8px;border:1px solid #E9E9E9;}
  	.price-unit{width: 60px;height:60px;line-height: 60px;margin-left:10px;border: 1px solid #E9E9E9;border-radius: 8px;text-align: center;font-size: 24px;}
  	.price-unit.actived{background: #FD4658;color: #FFF;}
  	.draw-result{margin-top: 28px;height: 60px;line-height: 60px;padding-left: 46px;background: #FEF8F8;}

    .join-btn{width: 540px;height: 84px;line-height: 84px;margin-top: 42px;box-sizing:border-box;padding: 0;box-shadow: 0 10px 28px 0 rgba(253,70,88,0.65);}


    /*投注成功*/
    .result-show{height: 300px;line-height: 360px;}
    .result-icon{position: absolute;width: 264px;height: 228px;top: -120px;left: 50%;margin-left: -132px;}
    .result-icon img{width: 100%;height: 100%;}


</style>
<style>
	.hz-content .lh-choose-list1{padding: 0 20px!important;}
	.dn-content .lh-choose-list1{padding-left:60px!important;text-align: left;}
	.qw-content .lh-header{margin-top: 30px!important;}
	.qw-content .choose-item-out {margin: 10px!important;}
</style>